<%--
  Created by IntelliJ IDEA.
  User: ZhouRui
  Date: 2021/10/3
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="e" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/nav.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/foot.css">
    <script src="../../boot/plugin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="../../boot/plugin/bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="http://47.100.102.177:8080/app/plugin/jquery.min.js"></script>
    <script src="../../boot/plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <title>电子书商品页</title>
</head>
<style>
    .form-group{
        top: 50px;
        position: absolute;
    }

    .thumbnail{
        position: relative;
        top: 80px;
        height: 380px;
        width: 250px;
    }

    .caption>h3{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 15px;
    }

    .caption>h3:hover{
        color: #0C0C0C;
    }

    .input-group{
        top: 70px;
        width: 550px;
        left: 300px;
    }

    .pagination{
        top: 100px;
        left: 370px;
        position: relative;
    }
    #car{
        left: 150px;
        top: 29px;
        width: 100px;
        font-size: 5px;
    }
</style>

<body>
<div class="container">
    <div class='nav'>
        <ul>
            <li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
            <li><a>主页</a></li>
            <li><a href='#'>分类</a>
                <ul>
                    <li><a href='../index01'>图书</a></li>
                    <li><a href='../index02'>电子书</a></li>
                </ul>
            </li>
            <book:if test="${user!=null}">
                <li><a href='#'>${user.uname}</a>
                    <ul>
                        <li><a href='../car/shoppingcar?account=${user.account}'>购物车</a></li>
                        <li><a href='../personal/center?status=1'>个人信息</a></li>
                        <li><a href='../order/order'>订单信息</a></li>
                    </ul>
                </li>
                <li><a href="/boot/users/exit">安全退出</a></li>
            </book:if>
            <li><a href='../login'>登陆</a></li>
            <li><a href='../login'>注册</a></li>
        </ul>
    </div>
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input id="searchbook" type="text" class="form-control" placeholder="请输入书名...">
                    <span class="input-group-btn">
						<button class="btn btn-default" type="button" onclick="search_book()">
							搜索
						</button>
                        <button type="button" class="btn btn-info" onclick="searchPic()">搜索图片</button>
					</span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
    <div class="container-fluid">
        <div class="row" id="books">
            <e:forEach items="${pageInfo.list}" var="p">
                <div class="col-md-3">
                    <div class="thumbnail" onclick="sendEBookId(this)">
                        <input type="hidden" class="thisEBookId" value="${p.ebkId}">
                        <img src="${p.pictureUrl}">
                        <div class="caption">
                            <h3 class="text-center text-success">${p.title}</h3>
                            <p class="text-info text-center">${p.author}  出版时间：${p.date}</p>
                            <p class="text-danger text-center" ><span style="color: red;font-size: 15px">￥<em style="font-style: normal">${p.price}</em></span></p>
                        </div>
                    </div>
                    <div>
                        <p class="pull-left">
                            <button  type="button" id="car" onclick="add_cart(${p.ebkId})" class="btn  btn-danger glyphicon  glyphicon-shopping-cart" >加入购物车
                            </button>
                        </p>
                    </div>
                </div>
            </e:forEach>
        </div>
    </div>


    <ul class="pagination">
        <li><a href="javascript:next_page(1)">首页</a></li>

        <e:if test="${pageInfo.pageNum<=1}">
            <li class="disabled"><a>&laquo;</a></li>
        </e:if>

        <e:if test="${pageInfo.pageNum>1}">
            <li><a href="javascript:next_page(${pageInfo.pageNum-1})">&laquo;</a></li>
        </e:if>


        <%--    处理标签的begin--%>
        <e:if test="${pageInfo.pageNum+2>=pageInfo.pages}">
            <e:set var="startPage" value="${pageInfo.pages-2}"></e:set>
            <e:set var="endPage" value="${pageInfo.pages}"></e:set>
        </e:if>

        <e:if test="${pageInfo.pageNum+2<pageInfo.pages}">
            <e:set var="startPage" value="${pageInfo.pageNum}"></e:set>

            <e:set var="endPage" value="${pageInfo.pageNum+2}"></e:set>
        </e:if>

        <%--    处理一下end--%>

        <%--    处理标签分页--%>
        <e:forEach begin="${startPage<=0?1:startPage}" end="${endPage}" var="v">
            <%--        处理一下当前页的背景颜色--%>
            <e:if test="${pageInfo.pageNum==v}">
                <li class="active"><a href="javascript:next_page(${v})">${v}</a></li>
            </e:if>

            <e:if test="${pageInfo.pageNum!=v}">
                <li><a href="javascript:next_page(${v})">${v}</a></li>
            </e:if>

        </e:forEach>

        <e:if test="${pageInfo.pageNum>=pageInfo.pages}">
            <li class="disabled text-danger"><a>&raquo;</a></li>
        </e:if>

        <e:if test="${pageInfo.pageNum<pageInfo.pages}">
            <li><a href="javascript:next_page(${pageInfo.pageNum+1})">&raquo;</a></li>
        </e:if>

        <li><a href="javascript:next_page(${pageInfo.pages})">尾页</a></li>
        <li><a href="#" class="text-danger">当前页${pageInfo.pageNum}/${pageInfo.pages}总页</a></li>
    </ul>


    <!-- 定义尾部 -->
    <div class="foot">
        <!-- 多快好省start -->
        <div class="dkhs">
            <ul>
                <li><div class="duo"></div><p>品类齐全，轻松购物</p></li>
                <li><div class="kuai"></div><p>多仓直发，急速配送</p></li>
                <li><div class="hao"></div><p>正平行货，精致服务</p></li>
                <li><div class="sheng"></div><p>天天低价，畅选无忧</p></li>
            </ul>
        </div>
        <!-- 多快好省end -->

        <!-- 结尾start -->
        <div class="jiewei">
            <div class="j1">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="line"></li>
                    <li><a href="#">English</a></li>
                    <li class="line"></li>
                    <li><a href="#">Site</a></li>
                    <li class="line"></li>
                    <li><a href="#">Media & IR</a></li>
                    <li class="line"></li>
                </ul>
            </div>
            <div class="j2">
                <p>云上书屋收录的免费书籍作品、频道内容、书友评论、用户上传文字、图片等其他一切内容及在云上书屋所做之广告均属用户个人行为，与本网站无关。
                </p>
            </div>
            <div class="j3">
                <ul>
                    <li class="l1"><a href="#"></a></li>
                    <li class="l2"><a href="#"></a></li>
                    <li class="l3"><a href="#"></a></li>
                    <li class="l4"><a href="#"></a></li>
                    <li class="l5"><a href="#"></a></li>
                    <li class="l6"><a href="#"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let bookTypeId=getQueryVariable("bookTypeId");
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return "";
    }

    function search_book(){
        let name = document.getElementById("searchbook").value
        if(name!=""&&name!=null){
            window.location="/boot/ebook/index?name="+name+"&bookTypeId="+bookTypeId;
        }
        else{
            window.location="index?"+window.location.search.substr(1);
        }
    }

    function next_page(num){
        let name2 = "${param.name}";
        window.location='/boot/ebook/index?pageNum='+num+"&name="+name2+"&bookTypeId="+bookTypeId;
    }

    function sendEBookId(obj){
        let ebookId = obj.getElementsByClassName("thisEBookId")[0].value;
        window.location='/boot/detail/ebook?ebookId='+ebookId;
    }
    function add_cart(bookId){
        $.get('/boot/car/adde',{Id: bookId},function (res) {
            if(res.code=='200') {
                layer.msg('加入购物车成功!')
            }
            else {
                layer.msg("请先进行登陆！")
            }
        })
    }
    function searchPic(){
        window.location='/boot/search/search?bookType=2';
    }
</script>
</html>